<template>
  <view class="family allColumnCenter" @touchmove="pageMove" @click.stop="pageMove">
    <!--  头部  -->
    <header-title ref="headerTitle" :title="`${selectedFamilyDetail.familyName}`" @headerClick="headerClick"
                  :is-click="true" is-fixed
                  @getPageHeight="getPageHeight"
                  z-index="10">
      <image src="https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/more.png"
             style="width: 33rpx;height: 27rpx;margin-left: 9rpx;"></image>
    </header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <!--  背景  -->
    <view class="bag"></view>
    <!--  底部  -->
    <scroll-view :scroll-y="true" class="family_scrollView" :style="{
      height: `calc(100vh - ${headerHeight}px)`
    }" @scrolltolower="indexScrolltolower" :lower-threshold="400">
      <view class="family_scrollView_all allColumnCenter">

        <view class="family_header allColumnCenter justify-center z-1" @click.stop="photoPath" v-if="!!selectedFamilyDetail && selectedFamilyDetail.images.length <= 0 ">
          <image class="family_header_image" mode="widthFix" src="/static/shiqin-images/uploadPhoto.png"></image>
          <view class="family_header_desc allColumnCenter">
            <text class="family_header_desc_text">还未上传全家福</text>
            <text class="family_header_desc_littleText">点击上传</text>
          </view>
        </view>
        <u-swiper :interval="2000" v-else :list="selectedFamilyDetail.images" name="url" style="width: 702rpx;height: 477rpx;" :border-radius="20" height="477" @click.stop="photoPath"></u-swiper>
        <!--  家庭成员 -->
        <view class="family_familyMembers_allColumnCenter mt-18 allColumnCenter">
          <list-header title="家庭成员" width="658rpx" @listHeaderIconClick="addFamilyMembers"
                       @listHeaderAllClick="listHeaderAllClick"
                       class="z-1"></list-header>
          <view class="family_familyMembers z-1">
            <view class="family_familyMembers_all">
              <view class="family_familyMembers_list allColumnCenter"
                    v-for="(item,index) in selectedFamilyDetail.member"
                    :key="index" v-if="index < 10"
                    @click.stop="goToUserPath(item)">
                <image-avater :width="92" :height="92" :src="item.avatar"></image-avater>
                <view class="family_familyMembers_list_bottom">
                  <text class="family_familyMembers_list_bottom_text">{{ item.appellation }}</text>
                </view>
              </view>
              <!--              <view class="family_familyMembers_addList allColumnCenter"-->
              <!--                    @click.stop="addFamilyMembers">-->
              <!--                <image src="/static/shiqin-images/add.png" class="family_familyMembers_addList_image"></image>-->
              <!--                <text class="family_familyMembers_addList_text">添加</text>-->
              <!--              </view>-->
            </view>
          </view>
        </view>
        <!-- 家庭纪念日 -->
        <view class="family_familyMembers_allColumnCenter mt-18 allColumnCenter">
          <list-header width="658rpx" title="家庭纪念日" @listHeaderIconClick="addFamilyAnniversary"
                       @listHeaderAllClick="anniversariesListPath" class="z-2">
          </list-header>

          <scroll-view class="family_familyAnniversary z-1 mb-15" :scroll-x="true">
            <view class="family_familyAnniversary_all flex items-center" v-if="!!selectedFamilyDetail">
              <card-hints v-for="(item,index) in selectedFamilyDetail.memorial_day" :key="index" :info="item"
                          :index="index"
                          :length="selectedFamilyDetail.memorial_day.length"></card-hints>
            </view>
          </scroll-view>
        </view>

        <view class="family_familyMembers_allColumnCenter mt-18 allColumnCenter" v-if="!!selectedFamilyDetail">
          <list-header title="家庭圈" width="658rpx" @listHeaderIconClick="familyCircleBublish"
                       @listHeaderAllClick="goFamilyCircleDetails"></list-header>
          <family-circle v-for="(item,index) in selectedFamilyDetail.family_circle" :key="index" :info="item"
                         :index="index" class="z-1"
                         :border="selectedFamilyDetail.family_circle.length - 1 != index"
                         @likeInterface="familyCircleLike"></family-circle>
        </view>
        <view class="family_publish z-1 allRowCenter mt-23" @click.stop="familyCircleBublish">
          <text class="family_publish_text">发布</text>
        </view>
        <view style="height: 150rpx" class="z-1"></view>
      </view>
    </scroll-view>

    <!-- 家庭成员弹窗 -->
    <first_popup ref="familyMemberPopUp">
      <template>
        <view class="familyMemberPopUp allColumnCenter">
          <scroll-view :scroll-left="familyMembersProfileListScroll.scrollLeft" :scroll-x="true"
                       class="familyMemberPopUp_scrollView mt-32"
                       scroll-with-animation>
            <view :id="selectProfileIndex == index ? 'familyMemberPopUp_scrollView_list':''"
                  class="familyMemberPopUp_scrollView_list" v-for="(item,index) in familyMembersProfileList" :style="{
              padding:index == 0 ? '0 12rpx 0 0':index == familyMembersProfileList.length?'0 0 0 12rpx':'0 12rpx'
            }" :key="index" @click="changeTab(index)">
              <image-avater id="imageAvater" :width="selectProfileIndex == index?111 : 78"
                            :height="selectProfileIndex == index? 111 : 78" :src="item.img"
                            :is-order="selectProfileIndex == index"
                            :border-width="4" border-color="#FF4206"></image-avater>
            </view>
          </scroll-view>
          <view class="familyMemberPopUp_editInfo row items-center justify-between mt-64">
            <view class="familyMemberPopUp_editInfo_left allRowCenter">
              <input type="text" :value="familyPopupFrom.nameBox" placeholder="尊姓"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="suernameInput"
                     @blur="surnameBlur">
            </view>
            <view class="familyMemberPopUp_editInfo_right allRowCenter">
              <input type="text" :value="familyPopupFrom.appellation" placeholder="大名"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="nameInput" @blur="nameBlur">
            </view>
          </view>
        </view>
      </template>
    </first_popup>

    <!-- 家庭纪念日弹窗 -->
    <first_popup ref="familyAnniversaryPopUp">
      <template>
        <view class="familyAnniversaryPopUp">
          <view class="familyAnniversaryPopUp_list row items-center justify-between"
                v-for="(item,index) in familyAnniversaryType" :key="index"
                @click.stop="jumpAddFamilyAnniversary(index)">
            <text class="familyAnniversaryPopUp_list_text">{{ item.name }}</text>
            <view class="familyAnniversaryPopUp_list_selectLine" v-if="selectFamilyAnniversaryType == index"></view>
            <view class="familyAnniversaryPopUp_list_line" v-else></view>
          </view>
        </view>
      </template>
    </first_popup>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import ListHeader from "../../components/shiqinComponents/pageComponents/listHeader.vue";
import ImageAvater from "../../components/shiqinComponents/pageComponents/imageAvater.vue";
import CardHints from "./components/cardHints.vue";
import FamilyCircle from "./components/familyCircle.vue";
import First_popup from "../../components/shiqinComponents/shiqin_globalPopUps/first_popup.vue";
import {addFamilyMember, getConfigFamilyImage, getMomentsList} from "../../api/shiqinAPI";

export default {
  components: {First_popup, FamilyCircle, CardHints, ImageAvater, ListHeader, HeaderTitle},
  data() {
    return {
      // 家庭成员列表
      familyMembersList: [
        {
          name: '父亲',
          imageSrc: '/static/shiqin-images/man.png'
        },
        {
          name: '母亲',
          imageSrc: '/static/shiqin-images/woman.png'
        },
        {
          name: '我',
          imageSrc: '/static/shiqin-images/man.png'
        },
        {
          name: '妻子',
          imageSrc: '/static/shiqin-images/woman.png'
        },
        {
          name: '兄',
          imageSrc: '/static/shiqin-images/man.png'
        },
        {
          name: '弟',
          imageSrc: '/static/shiqin-images/man.png'
        },
        {
          name: '姐',
          imageSrc: '/static/shiqin-images/woman.png'
        },
        {
          name: '妹',
          imageSrc: '/static/shiqin-images/woman.png'
        },
        {
          name: '儿子',
          imageSrc: '/static/shiqin-images/man.png'
        }
      ],
      // 家庭纪念日列表
      familyAnniversaryList: [
        {
          name: '张三的生日',
          day: '1',
          date: '6月6日',
          isLunar: false,
          isBirth: true
        },
        {
          name: '李四结婚纪念日',
          day: '30',
          date: '冬月廿六',
          isLunar: true,
          isBirth: false
        }, {
          name: '王五的生日',
          day: '28',
          date: '3月20日',
          isLunar: false,
          isBirth: true
        }, {
          name: '张三的生日',
          day: '12',
          date: '（闰）腊月二十九',
          isLunar: true,
          isBirth: true
        }
      ],
      // 家庭成员头像列表
      familyMembersProfileList: [],
      // 选中的家庭成员头像的下标
      selectProfileIndex: 2,
      familyPopupFrom: {
        nameBox: '',
        appellation: ''
      },
      familyAnniversaryType: [
        {
          name: '添加生日'
        },
        {
          name: '添加纪念日'
        }
      ],
      selectFamilyAnniversaryType: -1,
      familyAnniversaryFlag: false,
      headerHeight: 0,
      systemInfo: {},
      familyMembersProfileListScroll: {
        scrollLeft: 0,
        allWidth: 0,
        width: 0,
        selectWidth: 0
      },
      scrolltolowerInfo: {
        page: 2,
        pagesize: 10,
        total: 0,
        once: false
      }
    };
  },
  computed: {
    selectedFamilyDetail() {
      return Object.assign({}, this.$store.state.shiqinStore.selectedFamilyDetail)
    },
    family_id() {
      return this.$store.state.shiqinStore.selectedId
    }
  },
  watch: {
    familyMembersProfileListScroll: {
      deep: true,
      handler(newValue, oldValue) {
        this.familyMembersProfileListScroll.scrollLeft = newValue.allWidth - newValue.width / 2 + newValue.selectWidth / 2
      }
    }
  },
  onReady() {
    this.$store.dispatch('setSelectedFamilyActions')
    this.systemInfo = uni.getSystemInfoSync()
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    // 处理用户名的输入事件
    suernameInput(e) {
      if (e.target.value.length > 1) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'nameBox', arr.join('').substring(0, 2))
        } else {
          this.$set(this.familyPopupFrom, 'nameBox', '')
        }
      }
    },
    // 用于处理用户名的输入失去焦点事件
    surnameBlur(e) {
      if (e.target.value.length > 0) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'nameBox', arr.join('').substring(0, 2))
        } else {
          this.$set(this.familyPopupFrom, 'nameBox', '')
        }
      }
    },
    nameInput(e) {
      if (e.target.value.length > 1) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'appellation', arr.join('').substring(0, 4))
        } else {
          this.$set(this.familyPopupFrom, 'appellation', '')
        }
      }
    },
    nameBlur(e) {
      if (e.target.value.length > 0) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'appellation', arr.join('').substring(0, 4))
        } else {
          this.$set(this.familyPopupFrom, 'appellation', '')
        }
      }
    },
    getPageHeight(number) {
      this.headerHeight = number
    },
    headerClick() {
      this.$nav.navigateTo('/pages/familyPage/familiesList')
    },
    // 调用此方法将导航到照片上传页面
    photoPath() {
      this.$nav.navigateTo('/pages/photo/uploadPhont')
    },
    // 添加家庭成员
    async addFamilyMembers() {
      let {data, status, msg} = await getConfigFamilyImage()
      if (status != '200') {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
        return
      }
      this.familyMembersProfileList = data.list
      this.$refs.familyMemberPopUp.openPopup({
        title: '添加家庭成员',
        maskClick: false,
        confirm: () => {
          if (this.familyPopupFrom.nameBox == '') {
            uni.showToast({
              title: '姓氏尚未填写',
              icon: 'none'
            })
            return
          }
          if (this.familyPopupFrom.appellation == '') {
            uni.showToast({
              title: '名称尚未填写',
              icon: 'none'
            })
            return
          }
          addFamilyMember({
            family_id: this.$store.state.shiqinStore.selectedId,
            surname: this.familyPopupFrom.nameBox,
            daimyo: this.familyPopupFrom.appellation,
            img: this.familyMembersProfileList[this.selectProfileIndex].img
          }).then(res => {
            if (res.status == '200') {
              uni.showToast({
                title: '添加成功',
                icon: 'none'
              })
              this.$store.dispatch('setFamilyDetail')
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
            }
            this.$refs.familyMemberPopUp.closePopup()
            this.familyPopupFrom.appellation = ''
            this.familyPopupFrom.nameBox = ''
          })
        }
      })
    },
    // 添加家庭纪念日
    addFamilyAnniversary() {
      this.$refs.familyAnniversaryPopUp.openPopup({
        title: '请选择',
        maskClick: false,
        isShowConfirm: false
      })
    },
    // 跳转家庭成员列表
    listHeaderAllClick() {
      this.$nav.navigateTo('/pages/familyPage/membersList')
    },
    // 跳转用户详情
    goToUserPath(item) {
      this.$nav.navigateTo('/pages/shiqinUserPage/personalHome', {id: item.id})
    },
    // 页面滑动事件
    pageMove() {
      this.familyAnniversaryFlag = false
    },
    // 跳转添加纪念日
    jumpAddFamilyAnniversary(index) {
      this.selectFamilyAnniversaryType = index
      setTimeout(() => {
        switch (index) {
          case 0:
            this.$nav.navigateTo('/pages/familyAnniversary/birthday')
            this.$refs.familyAnniversaryPopUp.closePopup()
            this.selectFamilyAnniversaryType = -1
            return
          case 1:
            this.$nav.navigateTo('/pages/familyAnniversary/anniversary')
            this.$refs.familyAnniversaryPopUp.closePopup()
            this.selectFamilyAnniversaryType = -1
            return;
        }
      }, 500)
    },
    // 跳转纪念日列表
    anniversariesListPath() {
      this.$nav.navigateTo('/pages/familyAnniversary/anniversariesList')
    },
    // 跳转家庭全详情
    goFamilyCircleDetails() {
      this.$nav.navigateTo('/pages/familyCircleDetails/familyCircleDetails')
    },
    familyCircleBublish() {
      this.$nav.navigateTo('/pages/familyCircleDetails/familyCircleRelease')
    },
    changeTab(index) {
      this.selectProfileIndex = index
      setTimeout(() => {
        this.moveTo(index)
      }, 10)
    },
    moveTo(index) {
      const query = uni.createSelectorQuery().in(this)
      query.select('.familyMemberPopUp_scrollView').boundingClientRect(data => {
        this.familyMembersProfileListScroll.width = data.width
      }).exec()
      query.select('#familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
        this.familyMembersProfileListScroll.selectWidth = rect.width
      }).exec()
      query.selectAll('.familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
        if (rect.length > 0) {
          this.familyMembersProfileListScroll.allWidth = 0
          rect.forEach((item, i) => {
            if (i < index) {
              this.familyMembersProfileListScroll.allWidth += Number(item.width)
            }
          })
        }
      }).exec()
    },
    // 朋友圈点赞
    familyCircleLike(index) {
      this.$nextTick(() => {
        if (this.selectedFamilyDetail.family_circle[index].is_click == 0) {
          this.$store.commit('setFamilyCircleLike', {
            is_click: 1,
            index: index,
            click_num: this.selectedFamilyDetail.family_circle[index].click_num + 1,
            username: this.selectedFamilyDetail.username
          })
        } else {
          this.$store.commit('setFamilyCircleLike', {
            is_click: 0,
            index: index,
            click_num: this.selectedFamilyDetail.family_circle[index].click_num - 1,
            username: this.selectedFamilyDetail.username
          })
        }
        this.$forceUpdate()
      })
    },
    async indexScrolltolower() {
      if (this.selectedFamilyDetail.family_circle.length < this.scrolltolowerInfo.total || !this.scrolltolowerInfo.once) {
        this.scrolltolowerInfo.once = true
        let {data} = await getMomentsList({
          type: 1,
          family_id: this.family_id,
          page: this.scrolltolowerInfo.page,
          pagesize: this.scrolltolowerInfo.pagesize
        })

        this.$store.commit('addFamilyCircleList', data.list.data)
        this.scrolltolowerInfo.total = data.total
        this.scrolltolowerInfo.page++
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.family {
  width: 750rpx;
  min-height: 100vh;
  overflow: hidden;
  background: $secondaryPages;

  .family_haederImage {
    width: 25rpx;
  }

  .bag {
    width: 750rpx;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: url("https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/banner_background.png") no-repeat;
    background-size: 750rpx 100vh;
  }

  .family_scrollView {
    width: 750rpx;

    .family_scrollView_all {
      width: 750rpx;
      position: relative;


      .family_header {
        width: 702rpx;
        height: 477rpx;
        background: url("https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/001.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .family_header_image {
          width: 83rpx;
          height: 83rpx;
        }

        .family_header_desc {
          .family_header_desc_text {
            font-family: Heiti SC, Heiti SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #FFFFFF;
          }

          .family_header_desc_littleText {
            font-family: Heiti SC, Heiti SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #FF4208;
          }
        }
      }

      .family_familyMembers_allColumnCenter {
        width: 702rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        background: #FFFFFF;
        overflow: hidden;

        .family_familyMembers {
          width: 658rpx;
          //height: 344rpx;
          background: #FFFFFF;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          overflow: hidden;

          .family_familyMembers_all {
            margin: 0 0 25rpx 0;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            //grid-template-rows: repeat(2, 45%);
            grid-row-gap: 20rpx;
            grid-column-gap: 20px;
            justify-content: space-between;
            align-items: center;

            .family_familyMembers_list {
              .family_familyMembers_list_bottom {
                .family_familyMembers_list_bottom_text {
                  white-space: nowrap;
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #292929;
                }
              }
            }


            .family_familyMembers_addList {
              .family_familyMembers_addList_image {
                width: 92rpx;
                height: 92rpx;
              }

              .family_familyMembers_addList_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #696969;
              }
            }
          }


        }

        .family_familyAnniversary {
          width: 658rpx;
          overflow: hidden;

          .family_familyAnniversary_all {
            padding: 5rpx 0;
          }
        }
      }


      .family_publish {
        width: 362rpx;
        height: 80rpx;
        background: #FF4206;
        border-radius: 41rpx 41rpx 41rpx 41rpx;

        .family_publish_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #FFFFFF;
        }
      }
    }
  }

  .familyMemberPopUp {
    width: 506rpx;

    .familyMemberPopUp_scrollView {
      width: 506rpx;
      overflow: hidden;
      white-space: nowrap;

      .familyMemberPopUp_scrollView_list {
        display: inline-block;
      }
    }

    .familyMemberPopUp_editInfo {
      width: 506rpx;

      .familyMemberPopUp_editInfo_left {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_right {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }

  .familyAnniversaryPopUp {
    width: 496rpx;

    .familyAnniversaryPopUp_list {
      margin: 52rpx 0;

      .familyAnniversaryPopUp_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        color: #000000;
      }

      .familyAnniversaryPopUp_list_line {
        width: 30rpx;
        height: 30rpx;
        border-radius: 36rpx 36rpx 36rpx 36rpx;
        border: 2rpx solid #2F2F2F;
      }

      .familyAnniversaryPopUp_list_selectLine {
        width: 26rpx;
        height: 26rpx;
        border-radius: 13rpx 13rpx 13rpx 13rpx;
        border: 6rpx solid #FF4206;
      }
    }
  }
}

/deep/ .u-indicator-item-round-active {
  background: #FF4206 !important;
  opacity: 0.6;
}
</style>
